<template>
  <div class="type3" :style="Style">

    <ul class="info">
      <li class="item">歌曲数：<span class="num" v-text="Data.musicCount"/></li>
      <li class="item">专辑数：<span class="num" v-text="Data.albumCount"/></li>
      <li class="item"> MV 数：<span class="num" v-text="Data.mvCount"/></li>
    </ul>

    <div class="name" v-text="Data.name" />

    <div class="follow" @click="handleFollow">
      <div class="follow-btn"
           :class="Data.followed ? 'followed' : 'no-follow'"
           v-text="Data.followed ? '取消关注' : '+ 关注'"
      />
    </div>

    <icon-svg class="type-icon" icon-class="geshou"/>
  </div>
</template>

<script>
import { ArtistSubAsync } from 'api/singer'

export default {
  name: 'type3',
  props: {
    height: {
      type: Number,
      default: 0
    },
    Data: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  methods: {
    handleFollow () {
      let Data = Object.assign({}, this.Data)
      ArtistSubAsync(Data.id, Data.followed ? 0 : 1).then(res => {
        if (res) {
          Data.followed = !Data.followed
          this.$emit('update:Data', Data)
        }
      }).catch(() => {
        this.$toast.fail(`${Data.followed ? '取消关注' : '关注'}失败`)
      })
    }
  },
  computed: {
    Style () {
      return {
        height: this.height - this.$store.state.StatusBarHeight - 44 + 'px'
      }
    }
  }
}
</script>

<style scoped lang="less">
  @import "~common/style/variable.less";
  .type3 {
    padding: 8px 12px;
    position: relative;
    box-sizing: border-box;
    z-index: 10;

    .info {
      position: absolute;
      left: 10px;
      bottom: 20px;
      color: white;
      text-align: left;
      .item {
        padding: 3px 0;
        font-size: @font-size-medium-x;
        .num {
          font-size: @font-size-medium;
        }
      }
    }

    .name {
      position: absolute;
      bottom: 20px;
      left: 0;
      right: 0;
      color: @color-background;
      font-size: @font-size-large-x;
      font-weight: bold;
    }

    .follow {
      width: 80px;
      position: absolute;
      right: 10px;
      bottom: 20px;
      .follow-btn {
        height: 32px;
        line-height: 32px;
        transition: background .3s;
        border-radius: 18px;
      }
      .no-follow {
        background: @color-theme;
        color: @color-background;
      }
      .followed {
        background: @color-background-d;
        color: @color-text-l;
      }
    }

    .type-icon {
      font-size: 50px;
      position: absolute;
      bottom: 58px;
      right: 25px;
    }
  }
</style>
